const gameInfoTH = document.querySelectorAll('.gameScreen .info table th');
const gameInfoTD = document.querySelectorAll('.gameScreen .info table td');
const gameInfoSpan = gameInfoTH[0].querySelectorAll('span');
const gameInfoBar = gameInfoTH[0].querySelectorAll('div');
const mainTips = gameInfoTH[0].lastElementChild;
const panel = {
    "hero": [
        gameInfoTD[9],
        gameInfoTD[11],
        gameInfoTD[13],
        gameInfoTD[15],
        gameInfoTD[21],
        gameInfoTD[23],
        gameInfoTD[29],
        gameInfoTD[31]
    ],
    "move": [
        gameInfoTD[0],
        gameInfoTD[1],
        gameInfoTD[2],
        gameInfoTD[3],
    ],
    "pet": [
        gameInfoTD[4],
        gameInfoTD[5],
        gameInfoTD[6],
        gameInfoTD[7],
    ],
    "item": [
        gameInfoTD[16],
        gameInfoTD[17],
        gameInfoTD[18],
        gameInfoTD[19],
        gameInfoTD[24],
        gameInfoTD[25],
        gameInfoTD[26],
        gameInfoTD[27],
        gameInfoTD[32],
        gameInfoTD[33],
        gameInfoTD[34],
        gameInfoTD[35]
    ]
}
function renderSelectTips() {
    let name = null,
        desc = null;
    switch (game.gameState) {
        case 'choiceHero':
            name = heroesTips[game.selectedHero][0];
            desc = heroesTips[game.selectedHero][1];
            break;
        case 'choiceFaction':
            name = factionsTips[game.selectedFaction][0];
            desc = factionsTips[game.selectedFaction][1];
            break;
        case 'choiceMove':
            name = movesData[game.selectedMove].name;
            desc = movesData[game.selectedMove].desc;
            break;
        default:
            break;
    }
    document.querySelector('.choice .main_row .detail .name').innerText = name;
    document.querySelector('.choice .main_row .detail .desc').innerText = desc;
}
function renderSelect(e) {
    removeClass(document.querySelector('.choice .bottom_row ul li.select'), 'select')
    let id = e.currentTarget.dataset.id;
    switch (game.gameState) {
        case 'choiceHero':
            game.selectedHero = id;
            console.log("你选择了英雄：" + game.selectedHero);
            break;
        case 'choiceFaction':
            game.selectedFaction = id;
            break;
        case 'choiceMove':
            game.selectedMove = id;
            break;
        default:
            break;
    }

    addClass(e.currentTarget, 'select');
    renderSelectTips();
}
function renderMap() {
    let ul = document.querySelector('.gameScreen .map ul')
    let _f = document.createDocumentFragment()
    switch (game.cur_map_floor) {
        case 0:
            for (let i = 0; i < 36; i++) {
                let el = null, id = null;
                const li = document.createElement('li');
                {
                    el = game.cur_map[i];
                    id = el[1];
                    if (el[0] == 1) {
                        li.style.backgroundImage = `url(icon/area/${areaNames[id]}.png)`;
                    } else {
                        li.style.backgroundImage = `url(icon/monster/${monsterNames[id]}.png)`;
                    }
                    li.dataset.i = i
                }
                if (i == 0 || i == 5 || i == 30 || i == 35) {
                    addClass(li, "hints");
                    li.addEventListener('click', game.handleClickMap);
                }
                _f.appendChild(li)
            }
            ul.appendChild(_f)
            break;
        case 1:
            ul.innerText = '';
            for (let i = 0; i < 36; i++) {
                let el = null, id = null;
                const li = document.createElement('li');
                {
                    el = game.cur_map[i];
                    id = el[1];
                    if (el[0] == 1) {
                        li.style.backgroundImage = `url(icon/area/${areaNames[id]}.png)`;
                    } else {
                        li.style.backgroundImage = `url(icon/monster/${monsterNames[id]}.png)`;
                    }
                    li.dataset.i = i
                }
                if (i == 14 || i == 15 || i == 20 || i == 21) {
                    addClass(li, "hints");
                    li.addEventListener('click', game.handleClickMap);
                }
                _f.appendChild(li)
            }
            ul.appendChild(_f)
            break;
        case 2:
            ul.innerText = ''
            for (let i = 0; i < 36; i++) {
                let el = null, id = null;
                const li = document.createElement('li');
                {
                    el = game.cur_map[i];
                    id = el[1];
                    if (el[0] == 1) {
                        li.style.backgroundImage = `url(icon/area/${areaNames[id]}.png)`;
                    } else {
                        li.style.backgroundImage = `url(icon/monster/${monsterNames[id]}.png)`;
                    }
                    li.dataset.i = i
                }
                if (i == 0 || i == 5 || i == 30 || i == 35) {
                    addClass(li, "hints");
                    li.addEventListener('click', game.handleClickMap);
                }
                _f.appendChild(li)
            }
            ul.appendChild(_f)
            break;
        case 3:
            ul.innerText = ''
            // boss 关只有3个地图块
            for (let i = 0; i < 3; i++) {
                let el = null, id = null;
                const li = document.createElement('li');
                {
                    el = game.cur_map[i];
                    id = el[1];
                    if (el[0] == 1) {
                        li.style.backgroundImage = `url(icon/area/${areaNames[id]}.png)`;
                    } else {
                        li.style.backgroundImage = `url(icon/monster/${monsterNames[id]}.png)`;
                    }
                    li.dataset.i = i
                }
                if (i == 0) {
                    addClass(li, "hints");
                    li.addEventListener('click', game.handleClickMap);
                }
                _f.appendChild(li)
            }
            ul.appendChild(_f)
            break;
        default:
            break;
    }
}
function renderHeroStat() {
    for (let i = 0; i < 8; i++) {
        panel.hero[i].innerText = game.hero.heroInfo.abilities[i]
    }
    renderHeroBar();
    // 首次渲染英雄属性面板，初始技能
    if (game.cur_map_turn == 0) {
        gameInfoSpan[1].innerText = game.hero.name;
        renderHeroMove(0);
        for (let i = 0; i < 8; i++) {
            panel.hero[i].previousElementSibling.addEventListener("click", () => {
                gameInfoSpan[2].innerText = statTips[i][0] + ":" + statTips[i][1];
            })
        }
        // 点击标题区域时，渲染英雄面板
        gameInfoTH[0].addEventListener("click", game.renderHeroStat)
    }
}

function renderHeroBar() {
    gameInfoSpan[0].innerText = game.hero.heroInfo.level
    gameInfoBar[0].innerText = `${game.hero.heroInfo.hp}/${game.hero.heroInfo.abilities[0]}`
    document.documentElement.style.setProperty('--hp', `${Math.round(game.hero.heroInfo.hp / game.hero.heroInfo.abilities[0] * 100)}%`)
    gameInfoBar[1].innerText = `${game.hero.heroInfo.mp}/${game.hero.heroInfo.abilities[1]}`
    document.documentElement.style.setProperty('--mp', `${Math.round(game.hero.heroInfo.mp / game.hero.heroInfo.abilities[1] * 100)}%`)
    gameInfoBar[2].innerText = `${game.hero.heroInfo.exp[0]}/${game.hero.heroInfo.exp[1]}`
    document.documentElement.style.setProperty('--exp', `${Math.round(game.hero.heroInfo.exp[0] / game.hero.heroInfo.exp[1] * 100)}%`)

}
function renderHeroMove(i) {
    panel.move[i].style.backgroundImage = `url(icon/move/${movesNames[game.selectedMove]}.png)`;
    game.hero.heroInfo.hasMove.push(game.selectedMove);
    game.hero.heroInfo.activeMoveFlag[i] = true;
    // 点击技能时，渲染提示信息
    panel.move[i].addEventListener("click", (e) => {
        gameInfoSpan[2].innerText = movesData[game.selectedMove].name + ":" + movesData[game.selectedMove].desc;
        e.currentTarget.classList.toggle("unactive");
        game.hero.heroInfo.activeMoveFlag[i] = !game.hero.heroInfo.activeMoveFlag[i];
    })
}
function renderHeroPet(i) {
    // 只是把当前选择的宠物渲染出来
    panel.pet[i].dataset.i = game.selectedPet;
    panel.pet[i].style.backgroundImage = `url(icon/monster/${monsterNames[game.selectedPet]}.png)`;
    // 点击宠物时，渲染宠物面板到属性面板上
    panel.pet[i].addEventListener("click", game.renderCurPet)
}
function renderCurPet(e) {
    console.log(e.dataset);
    // 简化 宠物不会战后恢复生命值
    console.log("把当前点击的宠物的8维属性渲染到英雄属性面板上", game.selectedPet, game.hero.petInfo.battlePet, game.hero.petInfo.readyPet);
}
function renderHeroPetDead(i) {
    panel.pet[i].style.backgroundImage = '';
}
function renderHeroItem(i) {
    console.log("渲染物品", i);
    let _i = panel.item[game.hero.itemId.length - 1]
    _i.style.backgroundImage = `url(icon/item/${itemNames[game.hero.itemId[i]]}.png)`;
    _i.addEventListener("click", (e) => {
        gameInfoSpan[2].innerText = itemTips[game.hero.itemId[i]][0] + ":" + itemTips[game.hero.itemId[i]][1];
    })
}
function renderMapHints() {
    let _els = document.querySelectorAll(".gameScreen .map ul .hints")
    for (let i = 0; i < _els.length; i++) {
        removeClass(_els[i], "hints");
    }
    renderSeeMapHints();
}
function renderSeeMapHints() {
    let _maps = document.querySelectorAll(".gameScreen .map ul li")
    let i = game.cur_hero_pos;
    console.log("渲染可到达的地图块提示颜色", i);
    if (i == null) {
        console.log("null");
        return
    }
    if (i > 5 && (!containsClass(_maps[i - 6], "gone"))) {
        addClass(_maps[i - 6], "hints");
        _maps[i - 6].addEventListener('click', game.handleClickMap);
    }
    if ((i + 1) % 6 != 0 && (!containsClass(_maps[i + 1], "gone"))) {
        addClass(_maps[i + 1], "hints");
        _maps[i + 1].addEventListener('click', game.handleClickMap);
    }
    if (i < 30 && (!containsClass(_maps[i + 6], "gone")) && game.cur_map_floor != 3) {
        // 第3层时只有一行地图块，不需要渲染 下 方的地图块提示
        addClass(_maps[i + 6], "hints");
        _maps[i + 6].addEventListener('click', game.handleClickMap);
    }
    if (i % 6 != 0 && (!containsClass(_maps[i - 1], "gone"))) {
        addClass(_maps[i - 1], "hints");
        _maps[i - 1].addEventListener('click', game.handleClickMap);
    }
}
function renderTips(text) {
    console.log("渲染提示信息到提示框");
    mainTips.innerText = text;
}
function renderScores() {
    document.querySelector(".menuscreen .top_row .scores").innerText = game.scores;
}